<template>
    <div>
        <!-- <div class="notice flex-v-center">
            <i class="icon-notice fs34 mar-r10"></i>
            邀请一名好友付费开通会员，奖励最高可达100元
        </div> -->
        <div class="info">
            <div class="user">
                <div class="avator">
                    <image :src="userInfo.headImg" mode="" />
                </div>
                <div class="user_name">
                    <p>{{userInfo.userName}}</p>
                    <span>易客岛</span>
                </div>
            </div>
            <div class="op">
                <div class="op_item">
                    <span>可提现（元）</span>
                    <p>{{total.balanceAvailable}}</p>
                    <div @click="$navigate.to('/pages/invitation/withdrawal')" class="btn">申请提现</div>
                </div>
                <div class="op_item">
                    <span>提现中（元）</span>
                    <p>{{total.balance}}</p>
                    <div @click="$navigate.to('/pages/invitation/withdrawalRecord')" class="btn">提现记录</div>
                </div>
            </div>
        </div>
        <div class="cell" @click="$navigate.to('/pages/invitation/record?limitDay=00&isVip=00')">
            <div class="cell_title">今日数据</div>
            <div class="cell_item">
                <span>邀请人数</span>
                <p>{{today.allCnt}}人</p>
                <i class="icon-arrow-right color-red"></i>
            </div>
            <div class="cell_item" @click="$navigate.to('/pages/invitation/record?limitDay=00&isVip=01')">
                <span>开通会员</span>
                <p>{{today.vipCnt}}人</p>
                <i class="icon-arrow-right color-red"></i>
            </div>
        </div>
        <div class="cell">
            <div class="cell_title">累计数据</div>
            <div class="cell_item" @click="$navigate.to('/pages/invitation/record?limitDay=all&isVip=00')">
                <span>邀请人数</span>
                <p>{{allDay.allCnt}}人</p>
                <i class="icon-arrow-right color-red"></i>
            </div>
            <div class="cell_item" @click="$navigate.to('/pages/invitation/record?limitDay=all&isVip=01')">
                <span>开通会员</span>
                <p>{{allDay.vipCnt}}人</p>
                <i class="icon-arrow-right color-red"></i>
            </div>
        </div>
        <div class="cell">
            <div class="cell_title">奖励金说明</div>
            <div class="desc">
                <p>1、邀请一名好友开通会员，可获得奖励金，奖励规则：</p>
                <p>奖励金 = 购买会员金额 * 比例</p>
                <p>2、奖励金满100元可提现，提现仅限会员</p>
            </div>
        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex';
import { getUserInviteTotal } from '@/request/user'
export default {
    data() {
        return{
            total: {},
            today: {},
            allDay: {},
            shareKey: ''
        }
    },
    computed: {
        ...mapState({
            userInfo: state => state.user.userInfo
        })
    },
    onLoad({ shareKey}){
        this.shareKey = shareKey
    },
    onShow() {
        this.getTotal()
    },
    methods: {
        getTotal() {
            getUserInviteTotal({
                needInviteCnt: '01'
            }).then(res => {
                this.total = res.data.account
                this.allDay = res.data.allday
                this.today = res.data.today
            })
        },
    }
}
</script>

<style lang="less" scoped>
    .notice{
        width: 100%;
        height: 60rpx;
        background: @mainColor;
        color: #fff;
        font-size: 28rpx;
        padding: 0 20rpx;
        position: sticky;
        top: 0;
        z-index: 10;
    }
    .info{
        width: 100%;
        background: #fff;
        padding: 30rpx;
        margin-bottom: 20rpx;
        .user{
            width: 100%;
            height: 160rpx;
            border-radius: 15rpx;
            box-shadow: 0 0 10rpx #ddd;
            padding: 0 30rpx;
            margin-bottom: 30rpx;
            .align(v-center);
            .avator{
                width: 120rpx;
                height: 120rpx;
                flex-shrink: 0;
                image{
                    width: 100%;
                    height: 100%;
                }
            }
            .user_name{
                flex: 1;
                padding-left: 20rpx;
                height: 120rpx;
                .align(v-space-around, column);
                p{
                    font-size: 34rpx;
                    font-weight: bold;
                }
                span{
                    color: #999;
                }
            }
        }

        .op{
            display: flex;
            .op_item{
                flex: 1;
                height: 280rpx;
                .align(center, column);
                span{
                    font-size: 32rpx;
                    color: #000;
                    margin-bottom: 20rpx;
                }
                p{
                    font-size: 56rpx;
                    line-height: 80rpx;
                    font-weight: bold;
                    margin-bottom: 20rpx;
                }
                .btn{
                    width: 180rpx;
                    height: 66rpx;
                    border-radius: 33rpx;
                    color: #fff;
                    background: @mainColor;
                    .align(center);
                }
                &:last-child{
                    position: relative;
                    &::before{
                        content: "";
                        width: 1px;
                        height: 80rpx;
                        background: #ddd;
                        position: absolute;
                        left: 0;
                        top: 100rpx;
                    }
                    .btn{
                        color: @mainColor;
                        background: #fff;
                        border: 1px solid @mainColor;
                    }
                }
            }
        }
    }

    .cell{
        background: #fff;
        margin-bottom: 20rpx;
        padding: 0 30rpx;
        .cell_title{
            line-height: 80rpx;
            color: @mainColor;
            font-size: 34rpx;
        }
        .cell_item{
            height: 100rpx;
            border-bottom: 1px solid #ddd;
            .align(v-center);
            &:last-child{
                border-bottom: 0;
            }
            p{
                flex: 1;
                text-align: right;
                padding-right: 20rpx;
                color: @mainColor;
            }
            i{
                font-size: 22rpx;
                font-weight: bold;
            }
        }
        .desc{
            padding-bottom: 50rpx;
            p{
                line-height: 60rpx;
                color: #000;
            }
        }

    }
</style>